<template>
	<s-layout navbar="inner1" :bgStyle="{
        src: 'https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/myicon/20250409/3e1b3e3b18ab1e77a844d48b9642368a.png',
		color:'#fff'
    }">
		<navbar :index="state.index" :show="state.show" @change="changeIndex"></navbar>

		<view>
			<view class="money ss-p-y-25 ss-p-x-30">
				<view class="money-top ss-flex justify-between align-center">
					<view class="ss-flex align-center">
						<view class="total-text">总收入(元)</view>
						<view class="guarantee ss-m-l-30 ss-flex align-center justify-center">
							<image class="guarantee-icon"
								src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/myicon/20250409/f31e848b2764e18d7ef9daa6a65bf3b3.png">
							</image>
							<view>账户安全保障中</view>
						</view>
					</view>
					<view class="withdraw" @click="jump">提现到余额</view>
				</view>
				<view class="total-money ss-m-t-15">{{state.data.total_money}}</view>
				<view class="w-100 ss-flex justify-between align-center ss-m-t-30 ss-m-b-30">
					<view class="money-item">待结算<text class="ss-m-l-5">{{state.data.ing_money}}</text></view>
					<view class="money-item">可结算<text class="ss-m-l-5">{{state.data.money}}</text></view>
				</view>
				<view class="w-100 ss-flex justify-between align-center ss-m-t-30 ss-m-b-30" v-if="state.index === 0 || state.index === 2">
					<view class="money-item">已退款<text class="ss-m-l-5">{{state.data.refund_money}}</text></view>
				</view>
			</view>
		<!-- 	<image :src="sheep.$url.cdn('/static/tuangou/coupon_bg.png')" class="coupon-img"
				@click="sheep.$router.go('/pages/tuangou/prize_draw_of_week')"></image> -->
			<view class="tabs ss-p-x-30 ss-flex justify-start align-baseline">
				<view class="tabs-item" :class="[state.tab_index === index ? 'tab-active' : '']"
					v-for="(item,index) in tabsList" :key="index" @click="changeTab(index)">{{item.name}}</view>
			</view>
			<view class="ss-safe-bottom" v-if="state.tab_index === 0 || state.tab_index === 1||state.tab_index === 3">
				<view v-if="state.list">
					<view class="list ss-p-20" v-for="(item,index) in state.list" :key="index">
						<view class="w-100 ss-flex justify-between align-center ">
							<template v-if="state.index == 1 || state.index == 2">
								<picker :disabled="state.tab_index !== 1" mode="date" fields="month"
									:start="state.startDate" :end="state.endDate" @change="bindDateChange">
									<view class="ss-flex align-center">
										<view class="time ss-m-r-5">{{item.title}}</view>
										<uni-icons type="down" size="20" color="#575757"
											v-if="state.tab_index === 1"></uni-icons>
									</view>
								</picker>
							</template>
							<template v-if="state.index == 0">
								<view class="ss-flex align-center">
									<view class="time ss-m-r-5">{{item.title}}</view>
								</view>       
							</template>
						
							<view class="income">收入 ￥{{item.amount}}</view>
						</view>
						<scroll-view class="list-scroll" scroll-y="true">
							<view class="item" v-for="(v,p) in item.child" :key="p">
								<view class="item-left ss-flex">
									<image class="item-left-icon"
										src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/myicon/20250409/ef808f6454df9140946d82de9bbdf1bf.png">
									</image>
									<view class="ss-flex-1 item-box-t">
										<view class="item-name ss-line-1">{{v.title}}</view>
										<template v-if="v.aftersale_status==2&&state.index==2">
											<view class="apply-amount-1-t">已退款</view>
										</template>
										<view class="w-100 ss-flex justify-between align-center ss-m-t-8">
											<view class="item-time  ss-m-r-30">{{v.date}} {{v.time}}</view>
											<view class="item-money ss-flex-1 ss-line-1 text-right">￥{{v.fee}}</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<s-empty v-else paddingTop="100"
					icon="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/mengchong/soldout-empty.png" text="暂无数据">
				</s-empty>
			</view>
			<view class="year ss-p-20" v-if="state.tab_index === 2">
				<template v-if="state.index == 1 ||state.index == 2 ">
					<picker mode="date" fields="year" :start="state.startDate" :end="state.endDate" @change="bindYear">
						<view class="ss-flex align-center">
							<view class="year-title ss-m-r-5">{{state.year}}</view>
							<uni-icons type="down" size="20" color="#575757"></uni-icons>
						</view>
					</picker>
				</template>
				<template v-else>
					<view class="ss-flex align-center">
						<view class="year-title ss-m-r-5">{{state.year}}</view>
					</view>
				</template>
				
				<view class="year-total">共获得{{state.num}}单，合计</view>
				<tenplate v-if="state.index == 1 ||state.index == 2">
					<view class="year-money">￥{{state.fee}}</view>
				</tenplate>
				<template v-else>
					<view class="year-money">￥{{state.data.total_money}}</view>
				</template>
				
			</view>
		</view>
		<tui-calendar ref="calendar" isFixed type="2" title="" @change="calendarChange"></tui-calendar>
	</s-layout>
</template>

<script setup>
	import {
		ref,
		computed,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPageScroll
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import navbar from './components/navbar.vue';
	import tuiCalendar from "./components/tui-calendar/tui-calendar.vue"
	import dayjs from 'dayjs'
	
	const calendar = ref(null);
	
	const tabsList = computed(()=>{
		if(state.index==0){
			return state.tabs_list;
		}else{
			return state.tabs_list.slice(0, -1);
		}
	})
	
	const state = reactive({
		index: 0,
		tabs_list: [{
				name: '本周',
				id: 1,
			}, {
				name: '本月',
				id: 2,
			},
			{
				name: '本年',
				id: 3,
			},
			{
				name: '自定义查询',
				id: 3,
			},
		],
		tab_index: 0,
		data: {
			total_money: '0.00', //总收入
			ing_money: '0.00', //待结算
			money: '0.00', //可提现
			refund_money: '0.00', //已退款
		},
		list: [],
		startDate: '2000',
		endDate: '',
		year: '',
		num: 0,
		fee: '',
		dateRange: null,
		history_data: {}, // 历史数据
		shop_name: '店铺名称', // 店铺名称
		show: false
	})


	const getDefaultDateRange = () => {
		const today = new Date();
		const yesterday = new Date(today);
		yesterday.setDate(today.getDate() - 1);
		return [yesterday, today];
	};

	function get_data() {
		sheep.$api.pay.pay_history({
			date: state.dateRange
		}).then(res => {
			console.log(res);
			state.history_data = res.data
		})
	}



	onLoad(() => {
		
		// setStartTime()
		state.dateRange = getDefaultDateRange();
		// 初始化时加载数据
		// loadData();
		get_data();
		getJxData();

	})

	onShow(() => {
		
		// getStoreData();
		
	})



	onPageScroll((e) => {
		if (e.scrollTop >= 10) {
			state.show = true
		} else {
			state.show = false
		}
	})


	// 日期改变事件
	const onDateChange = (e) => {
		console.log(e);
		if (!e) return;
		state.dateRange = e;
		// 日期变化时重新加载数据
		// loadData();
		get_data()
	};

	// 格式化显示日期
	const formatDateRange = computed(() => {
		if (!state.dateRange) return '请选择日期范围';
		const [start, end] = state.dateRange;
		return `${formatDate(start)} 至 ${formatDate(end)}`;
	});

	// 日期格式化函数
	const formatDate = (date) => {
		if (!date) return '';
		const d = new Date(date);
		return `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, '0')}.${String(d.getDate()).padStart(2, '0')}`;
	};

	const setStartTime = () => {
		state.year = dayjs().format('YYYY')
		state.endDate = dayjs().format('YYYY')
	}

	const jump = () => {
		if (state.data.money === '0.00') {
			return sheep.$helper.toast('可提现金额为0');
		}
		sheep.$router.go('/pages/merchant/transfer', {
			type: state.index
		})
	}

	const changeTab = (e) => {
		state.tab_index = e;
		
		state.year = dayjs().format('YYYY')
		if (state.index === 1) {
			setTime()
		}else{
			if(state.index == 2){
				setTime()
			}else{
				if(state.tab_index==3){
					calendar.value && calendar.value.show();
				}
				getJxData();
			}
			
			
		}
	}

	const bindYear = (e) => {
		state.year = e.detail.value
		if(state.index==1){
			getStoreList(e.detail.value)
		}
		else{
			getYxStoreList(e.detail.value)
		}
	}

	const bindDateChange = (e) => {
		if(state.index==1){
			getStoreList(e.detail.value)
		}
		else{
			getYxStoreList(e.detail.value)
		}
		
	}
	//获取超引擎计划收益（待结算，可结算，已退款等字段）
	const getStoreData = async () => {
		const {
			error,
			data
		} = await sheep.$api.pay.getStoreMoney()

		if (error === 0) {
			if (data) {
				state.data.total_money = data.total_money
				state.data.ing_money = data.ing_money
				state.data.money = data.money
			}
		}
	}
	// 设置时间
	const setTime = () => {
		let month = ''
		if (state.tab_index === 1) {
			// 默认获取当前月份
			month = dayjs().format('YYYY-MM');
		}
		if (state.tab_index === 2) {
			month = state.year
		}

		if(state.index !== 2){
			console.log(11111);
			
			getStoreList(month)
		}
		else{
			getYxStoreList(month)
		}
	}
	//获取超引擎计划列表
	const getStoreList = async (month) => {
		const {
			error,
			data
		} = await sheep.$api.pay.getStoreList({
			time_type: state.tabs_list[state.tab_index].id,
			month: month
		})
		if (error === 0) {
			if (data) {
				if (state.tab_index !== 2) {
					state.list = data
					console.log('state.list:',state.list)
				} else {
					state.num = data.num
					state.fee = data.fee
				}
			} else {
				state.list = null
			}
		}
	}
	//获取商城商户收益列表
	async function getJxData(month = []) {

		const {
			error,
			data
		} = await sheep.$api.pay.getJxMoney({
			type: state.tab_index+1,
			month: month,
		});

		if (error === 0) {
			state.list = data.list;
			console.log('state.list:',state.list);
			state.num = data.amount.num;
			state.data.total_money = data.amount.total;
			state.data.ing_money = data.amount.paid;
			state.data.money = data.amount.completed;
			state.data.refund = data?.amount?.refund||0.00;
		}
	}
	//获取惊喜严选列表
	const getYxStoreList = async (month) => {
		const {
			error,
			data
		} = await sheep.$api.pay.getSurpriseShopOrder({
			time_type: state.tabs_list[state.tab_index].id,
			month: month
		})
		if (error === 0) {
			if (data) {
				if (state.tab_index !== 2) {
					state.list = data
				} else {
					state.num = data.num
					state.fee = data.fee
				}
			} else {
				state.list = null
			}
		}
	}

	// 获取严选供应链商户收益
	async function getYxData(month = []) {
		const {
			error,
			data
		} = await sheep.$api.pay.getSurpriseShop({
			type: state.tab_index+1,
			month: month,
		});

		if (error === 0) {
			calendar.value.hide
			
			state.data.total_money = data.total_money;
			state.data.ing_money = data.ing_money;
			state.data.money = data.money;
		}
		setTime()
	}
	//navBar点击时
	const changeIndex = (e) => {
		state.data= {
			total_money: '0.00', //总收入
			ing_money: '0.00', //待结算
			money: '0.00', //可提现
			refund_money: '0.0', //已退款
		}
		state.index = e
		state.list = [];
		state.tab_index = 1
		if (state.index === 1) {
			setStartTime()
			setTime()
			getStoreData()
		} else {
			if(state.index === 2){
				getYxData()
				setStartTime()
				setTime()
				
			}
			else{
				getJxData();
			}
			
		}
	}
	
	function calendarChange(e){
		let month = '';
		month = [e.startDate,e.endDate]
		getJxData(month);
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.money {
		width: 710rpx;

		border-radius: 20rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.3);
		margin: 20rpx auto 0;

		.money-top {
			.total-text {
				font-size: 30rpx;
				font-weight: normal;
				color: #5B5B5B;
			}

			.guarantee {
				width: 267rpx;
				height: 40rpx;
				border-radius: 16rpx;
				background: #FEF0EF;
				font-size: 28rpx;
				font-weight: normal;
				line-height: 33rpx;
				text-align: center;
				color: #9E9E9E;

				.guarantee-icon {
					width: 26rpx;
					height: 26rpx;
					margin-right: 10rpx;
				}
			}

			.withdraw {
				font-size: 30rpx;
				font-weight: normal;
				color: #3922E5;
			}
		}

		.total-money {
			font-size: 72rpx;
			font-weight: 500;
			color: #1E1E1E;
		}

		.money-item {
			width: 50%;
			font-size: 30rpx;
			font-weight: normal;
			color: #9E9E9E;

			text {
				color: #1E1E1E;
			}
		}
	}

	.tabs {
		margin-top: 50rpx;

		.tabs-item {
			font-size: 28rpx;
			font-weight: normal;
			color: #B0B0B0;
			margin-right: 30rpx;
			text-align: center;
		}
	}

	.list {
		width: 710rpx;
		max-height: 552rpx;
		border-radius: 20rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.3);
		margin: 30rpx auto 0;

		.time {
			font-size: 28rpx;
			font-weight: normal;
			color: #1E1E1E;
		}

		.income {
			font-size: 28rpx;
			font-weight: normal;
			color: #B0B0B0;
		}

		.list-scroll {
			width: 100%;
			max-height: 474rpx;

			.item {
				width: 100%;
				height: 117rpx;
				border-bottom: 1rpx solid #ACACAC;

				.item-left {
					width: 100%;
					height: 117rpx;

					.item-left-icon {
						width: 72rpx;
						height: 72rpx;
						margin-right: 20rpx;
					}

					.item-name {
						font-size: 32rpx;
						font-weight: normal;
						color: #1E1E1E;
					}

					.item-time {
						font-size: 28rpx;
						font-weight: normal;
						color: #A9A9A9;
					}

					.item-money {
						font-size: 36rpx;
						font-weight: 500;
						color: #1E1E1E;
					}
				}


			}
		}
	}

	.year {
		width: 710rpx;
		height: 283rpx;
		border-radius: 20rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.3);
		margin: 30rpx auto 0;

		.year-title {
			font-size: 28rpx;
			font-weight: normal;
			color: #1E1E1E;
		}

		.year-total {
			font-size: 28rpx;
			font-weight: normal;
			color: #B0B0B0;
			margin-top: 47rpx;
		}

		.year-money {
			color: #1E1E1E;
			font-weight: 700;
			font-size: 50rpx;
			margin-top: 26rpx;
		}
	}

	.tab-active {
		font-size: 36rpx !important;
		font-weight: 500 !important;
		color: #1855FF !important;
	}




	image {
		display: block;
		width: 100%;
		height: 100%;
	}

	.page {}



	.list {

		.date_list {
			padding: 0 10rpx;

			.date_title {
				font-size: 26rpx;
				display: inline-block;
				padding: 10rpx 15rpx;
				margin-bottom: 20rpx;
				background-color: #eaeaea;
			}

			.card {
				background: #fff;
				border-radius: 12rpx;
				padding: 20rpx;
				display: flex;
				align-items: flex-start;
				margin-bottom: 20rpx;

				.left {
					margin-right: 20rpx;
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}

				.right {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.info {
						.title {
							font-size: 32rpx;
							color: #333;
							margin-bottom: 8rpx;
						}

						.time {
							font-size: 26rpx;
							color: #999;
						}

					}

					.amount {
						.price {
							font-size: 32rpx;
							color: #FFB800;
							font-weight: 500;
						}

						.fee {
							font-size: 26rpx;
							color: #999;
						}
					}
				}
			}
		}
	}

	.header_card {
		background: linear-gradient(180deg, #87CEEB, #B0E0E6);
		padding: 30rpx;
		margin: 20rpx;
		border-radius: 12rpx;

		.date {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 20rpx;
		}

		.amount_info {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;

			.left {
				.text {
					font-size: 32rpx;
					color: #333;
					margin-bottom: 16rpx;
				}

				.btn {
					display: inline-block;
					padding: 10rpx 40rpx;
					background: rgba(255, 255, 255, 0.9);
					border-radius: 100rpx;
					font-size: 28rpx;
					color: #333;
				}
			}

			.right {
				text-align: left;

				.item {
					font-size: 26rpx;
					color: #333;
					margin-bottom: 8rpx;

					&:last-child {
						margin-bottom: 0;
					}
				}
			}
		}
	}

	.coupon-img {
		margin-top: -10rpx;
		width: 100%;
		height: 280rpx;
	}
	.item-box-t{
		position: relative;
		.apply-amount-1-t{
			width:100rpx;
			height:28rpx;
			position: absolute;
			right: 0rpx;
			top:0rpx;
			
		}
	}

</style>